<template>
	<view>
		<view class="all">
			<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
			<view class="cal">
				<text>消费日期：</text>
				<uni-easyinput trim="all" v-model="statementDate" focus placeholder="请选择日期" ></uni-easyinput>
				<button type="primary" size="mini" @click="open">选择日期</button>
				</view>
				<view class="type">
					<text>消费类型：</text>
							<uni-easyinput  trim="all" v-model="bill.type" focus placeholder="请选择类型"  ></uni-easyinput>
						<template>
						  <view>
						    <uni-data-select
						      v-model="bill.type"
						      :localdata="range"
						    ></uni-data-select>
						  </view>
						</template>
				</view>
				<view class="money">
					<text>消费日期：</text>
						<uni-easyinput  trim="all" v-model="bill.money" focus placeholder="请输入金额"  ></uni-easyinput>
					</view>

					<button type="primary"  size="default" @click="add()" style="width: 100%;margin-top: 50rpx;">记录</button>
			</view>
		</view>
	</view>
</template>

<script>
import bill from '../../api/pay.js';
export default {
	data() {
		return {
			id:'',
			statementDate: '',
			bill: {
				statementDate: '',
				type: '',
				money:'',
				uid:''
			},
			      range: [
			        { value: "医疗", text: "医疗" },
					{ value: "美食", text: "美食" },
			        { value: "娱乐", text: "娱乐" },
					{ value: "出行", text: "出行" },
					{value:  "服装",  text: "服装"},
					{ value: "其他", text: "其他" },
			      ],
		};
	},
	methods: {
			// 增加按钮
			// 获取用户id
			userid(){
				bill.getUserInfoByToken().then(res => {
					this.bill.uid = res.data.data.userInfo.id;
					
			})
			},
		add() {
			if(this.id){
				console.log(this.bill)
				bill.updateBill(this.bill)
				.then(res => {
					uni.switchTab({
						url:'/pages/list/list'
					})
									
					console.log(res.data.message);
				});
			}
			else{
				bill.addBill(this.bill).then(res => {
					uni.switchTab({
						url:'/pages/list/list'
					})

				});
			}
			
		},
			// 打开日历
		open() {
			this.$refs.calendar.open();
		},
		// 日历的改变
		confirm(e) {
			this.bill.statementDate = e.fulldate;
			this.statementDate=this.bill.statementDate
			this.$forceUpdate //赋值后强制刷新渲染
		},

		init(){
			bill.getDetailBill(this.id)
		.then(res=>{
			this.bill= res.data.data.detailBill
		})
		}
	},
	onLoad(options) {
			this.id = options.id;
			if(this.id!=null){
				this.init()
			}else{
				this.bill={}
			}
	this.userid()

	}
};
</script>

<style scoped lang="less">
.all {
	display: flex;
	flex-direction: column;
	.cal,.type,.money{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		flex-wrap: nowrap;
	}
}
</style>
